<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_元素内容操作</title>
		<!-- 01_内容元素操作：元素以及元素内容的部分
		    .html()          无参---功能：获取匹配元素中第一元素的内容
			                 有参---功能：将匹配的元素集合当中所有元素替换为新元素
			特点：针对 内容 + 元素				 
			.val()           无参---功能：表单内元素：input、select生效
			                             获取表单元素中第一元素的内容
			                 有参---功能：【设置】表单内元素：input、select生效
							          input元素直接显示value
			                          select元素不直接显示
									  option 元素中内容：用户显示
									  option 元素中value值，
									  必须当前select中，option元素value值
									  直接赋值：打印select元素对象名称[object Object]
								
									  
			特点：针对(表单内form元素可以包裹)元素的内容
										  
			.text()                   无参---功能：获取匹配元素集合中所有元素的文本内容
			                          有参---功能：【设置】匹配元素集合中所有元素的文本
									              内容替换
			
		 -->                         
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<button>按钮-针对html()函数-有参</button>
	   <span>lorem1</span>
	   <span>lorem2</span>
	   <h1>val()函数使用</h1>
	    <button>按钮-针对val()函数-无参</button>
		 <input type="text" value="文本框真实数据">
		 <input type="text" value="文本框真实数据2" placeholder="输入框显示效果[提示]">
		 <!-- html:按钮下拉列表 select>option*3 需要加value -->
		 <!-- jq:点击按钮，设置下拉列表的值  | html()与val()有参是否存在区别 -->
		 <button>按钮-针对val()函数-有参</button>
		 <select>
		 	<option value="rem1">lorem1</option>
		 	<option value="rem2">lorem2</option>
		 	<option value="rem3">lorem3</option>
		
		 </select>
		 <h1>text()函数使用</h1>
		 <button class="btn1">按钮-针对text()函数-无参</button>
		 <button class="btn2">按钮-针对text()函数-有参</button>
		 <p>lorem4</p>
		 <p>lorem5</p>
		 <p>lorem6</p>
		 
		<script>
		//1.找到 类名为 btn1 的按钮--点击---弹窗内容为 三个 p元素内容 【无参】
		$(".btn1").click(function(){
			var ptext=$("p").text();
			alert(ptext); 
		});
		//2.找到	 类名为 btn2 的按钮--点击---lorem4\5\6 改成“修改文本”【有参】
		$(".btn2").click(function(){
			$("p").text("修改文本");
		});	
			
			
			
			
			
		
		//	$("button").click(function(){
				//设置元素第一个的值   1.直接设置下拉列表中value的值
				
		//	  $("select").val("rem1");
			  	//设置元素第一个的值   2.给第一个值添加，设置的内容【本身存在】
		//		var rem=$("select").val();
				
				
				
			  //[object Object] JavaScript中 对象的默认字符串表示形态
			  //select元素 对象 输出[object Object]
			  
			  //value的值：真实数据    option中值：显示数据
			  //object Object  测试：无参
		//	  alert("val()函数有参："+rem);
		//	});
		
		
          //动态效果：点击按钮，获取第一个表单元素的内容，元素打印出来
		  // 	$("button").click(function(){
				/*注意：js变量名不可以为关键字！     in是关键字*/
			//	var ins=$("input").val();
			//	alert("var()函数无参："+ins);
		//	}); 
		
		
		
			//有参：点击按钮--下面两个span   改成lorem、lorem
			/*$("button").click(function(){
				$("span").html("<span>lorem</span>");
			});*/
			
			
			
			
			
			
			
			//js变量【var i=1】==jq变量   var变量名=值、元素
			//无参数        html（）函数使用
		//	var html=$("span").html();
			// BOM方式 打印数据
		//	alert("无参数获取第一个元素内容："+html);
		</script>
	</body>
</html>